<template>
  <div>
    <head-top></head-top>
    <div class="fl_box">
      <div class="fl_left left">
        <ul>
          <li v-for="first in firstList">
            <div class="nav_box1" @click="findSecondCategory(first.id)">
              {{ first.cname }}
            </div>
            <div v-for="second in secondList">
              <div
                v-if="first.id == second.parentId"
                @click="findGoodsByCategory(second.id, 'sort')"
                class="nav_box2 active"
              >
                <div>
                  <span>{{ second.cname }}</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="fl_right right">
        <div class="right_top">
          <div @click="findGoodsByCategory(categoryId, 'sort')">综合排序</div>
          <div @click="findGoodsByCategory(categoryId, 'old_price')">
            按价格
            <img src="../../images/orderDefault.png" />
          </div>
          <div
            class="active"
            @click="findGoodsByCategory(categoryId, 'all_saled')"
          >
            按销量
          </div>
        </div>
        <scroll ref="categorylistscroll" class="wrapper">
<!--           category_wrapper-->
          <div ref="categorywrapper" class="contain">
            <div v-for="(good, index) in goodsList" class="demo">
              <div @click="toGoodDetail(good.specificationId)">
                <div class="demo-left left">
                  <img :src="good.goodsImgUrl" />
                  <!-- <div v-if="good.isShelves == 0" class="goods_check">
                    商品下架
                  </div>
                  <div v-else-if="good.stock == 0" class="goods_check">
                    库存不足
                  </div> -->
                </div>
                <div class="demo-right">
                  <div class="goods_name ellipsis">{{ good.goodsName }}</div>
                  <div class="goods_sku_sale">
                    <span class="goods_sku">{{ good.specificationName }}</span>
                    <!-- <span class="goods_sale">已采购10件</span> -->
                  </div>
                  <div class="goods_price_cart">
                    <div class="goods_price left">￥{{ good.oldPrice }}</div>
                    <div class="goods_cart right">
                      <img
                        v-if="good.buyNum"
                        src="../../images/minus.png"
                        @click.stop.prevent="minusCartGoods(index)"
                      />
                      <div
                        v-if="good.buyNum"
                        class="cart_num"
                        :id="'goods' + item.goodsId"
                      >
                        {{ good.buyNum }}
                      </div>
                      <img
                        src="../../images/add.png"
                        @click.stop.prevent="addCartGoods(index)"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="loading-wrapper"></div>
        </scroll>
        <div v-if="Object.keys(goodsList).length == 0" class="no_data">
          <img src="../../images/no_data.png" alt="" />
        </div>
        <div class="clear"></div>
        <alert-tip
          v-if="showAlert"
          @closeTip="showAlert = false"
          :alertText="alertText"
        ></alert-tip>
        <!-- 多规格弹出框 -->
        <multi-spec-model
          v-show="showMultiSpec"
          @hideMultiSpec="hideMultiSpec"
          :item="item"
          @addCart="addCart"
          @minusCart="minusCart"
        ></multi-spec-model>
      </div>
    </div>

    <!--         <transition name="loading">
            <loading></loading>
        </transition> -->

    <foot-guide></foot-guide>
  </div>
</template>

<script>
import headTop from "src/components/header/head";
import footGuide from "src/components/footer/footGuide";
import scroll from "src/components/common/scroll";
import alertTip from "src/components/common/alertTip";
import multiSpecModel from "src/components/common/multiSpecModel";
// import { findGoodsByCategory } from "src/service/getData";
import {
  addCart,
  findFirstCategory,
  findSecondCategory,
  findGoodsByCategory,
  selectCartNum,
} from "src/service/category";

import loading from "src/components/common/loading";

export default {
  data() {
    return {
      firstList: [], //一级目录内容
      secondList: [], //二级目录内容
      goodsList: [], //商品内容
      order: "desc",
      categoryId: 0,
      sort: "",
      pLevel: 1, //初始化查询一级目录
      parentId: 1,
      data: [],
      pulldown: true,
      pullup: true,
      loadFinish: false,
      counter: 1, //默认已经显示出10条数据 count等于一是让从11条开始加载
      num: 10, // 一次显示多少条
      pageStart: 1, // 开始页数
      pageEnd: 10, // 结束页数
      alertText: "",
      showAlert: false,
      showMultiSpec: false,
      item: {},
      spec: {},
      orderBy: "default",
      showLoading: true, //显示加载动画
      flag: false, //协助排序
    };
  },
  created() {
    this.findFirstCategory();
    this.findGoodsByCategory(this.categoryId, "sort");
    console.log(JSON.parse(localStorage.getItem('sellerInfo')));
  },
  mounted() {},
  computed: {},
  components: {
    headTop,
    footGuide,
    scroll,
    alertTip,
    multiSpecModel,
    loading,
  },
  methods: {
    initData() {},
    findFirstCategory() {
      findFirstCategory().then((response) => {
        this.firstList = response.data.data;
      });
    },
    findSecondCategory(parentId) {
      findSecondCategory(parentId).then((response) => {
        this.secondList = response.data.data;
      });
    },
    loadRefreshData() {},
    loadData() {},
    findGoodsByCategory(categoryId, sort) {
      findGoodsByCategory({ categoryId, sort }).then((response) => {
        response.data.data.forEach((item) => {
          item.buyNum = 0;
          selectCartNum(item).then((response) => {
            item.buyNum = response.data.data;
          });
        });
        this.goodsList = response.data.data;
      });
      this.categoryId = categoryId;
    },
    //cart变化的时候重新计算当前商品的数量
    // selectCartNum(index) {
    //   selectCartNum(this.goodsList[index]).then((response) => {
    //     this.goodsList[index].buyNum = response.data.data;
    //   });
    // },
    specGoodNum(spec) {},
    minusCartGoods(index) {
      if (this.goodsList[index].buyNum == 0) {
        this.goodsList[index].buyNum = 0;
      } else {
        this.goodsList[index].buyNum -= 1;
      }
      this.addCart(this.goodsList[index]);
      // location.reload();
    },
    addCartGoods(index) {
      this.goodsList[index].buyNum += 1;
      this.addCart(this.goodsList[index]);
      // location.reload();
    },
    minusCart(good) {},
    //加入购物车
    addCart(good) {
      addCart(good).then((response) => {});
    },
    hideMultiSpec() {},
    toGoodDetail(specificationId) {
      console.log(specificationId);
      this.$router.push({ path: "/goodsDetail", query: {id:specificationId}});
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
span {
  font-style: normal;
}
em {
  font-style: normal;
}
.fl_box {
  position: absolute;
  background: #fff;
  top: 1.08rem;
  left: 0;
  right: 0;
  bottom: 1rem;
}
.fl_left {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.9rem;
  bottom: 0;
  overflow-y: auto;
  background: #f4f4f4;
}
.fl_left ul li {
  line-height: 0.96rem;
  text-align: center;
  font-size: 0.28rem;
  color: #333;
  border-bottom: 0.02rem solid #d6d6d6;
  background: #f4f4f4;
}
.fl_left ul li img {
  width: 0.32rem;
  height: 0.32rem;
  vertical-align: -0.06rem;
}
.fl_left ul li.cur .nav_box1 {
  color: #ffa101;
}
.nav_box2 {
  line-height: 0.73rem;
  display: block;
  font-size: 0.24rem;
  background: #fcfcfc;
  color: #666;
  padding: 0.01rem 0;
  border-top: 0.01rem dashed #d6d6d6;
}
.nav_box2 div {
  margin: 0.06rem 0;
}
.nav_box2.active {
  background: #fff;
}
.nav_box2.active div {
  border-left: 0.08rem solid #ffa101;
}
.nav_box2.active div span {
  color: #ffa101;
}
.fl_left ul li:hover .nav_box2 {
  display: block;
}
.fl_right {
  position: absolute;
  top: 0;
  left: 2.13rem;
  right: 0;
  bottom: 0;
}
.fl_right .right_top {
  line-height: 0.9rem;
  text-align: left;
  font-size: 0.3rem;
  display: flex;
  height: 0.9rem;
  border-bottom: 0.01rem solid #d6d6d6;
}
.fl_right .right_top div {
  flex: 1;
  text-align: center;
}
.fl_right .right_top div.active {
  color: #ffa101;
}
.right_top .right_top_xl {
  position: absolute;
  top: 0.9rem;
  left: 0;
  width: 100%;
  background: #fff;
}
.right_top .right_top_xl > div:active {
  background: #efefef;
}
.fl_right .right_top img {
  width: 0.16rem;
  height: 0.18rem;
  margin-left: 0.08rem;
  display: inline-block;
  margin-top: 0.36rem;
  display: inline-block;
}
.fl_right .contain ul {
  position: absolute;
  top: 0.9rem;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}
.fl_right .contain ul li {
  padding: 0.3rem 0.2rem 0.3rem 0;
  border-bottom: 0.02rem solid #efefef;
}
.fl_right .contain ul li > .left {
  width: 1.7rem;
  height: 1.7rem;
}
.fl_right .contain ul li > .left img {
  width: 100%;
}
.fl_right .contain ul li > .right {
  width: calc(100% - 1.86rem);
  -webkit-width: calc(100% - 1.86rem);
  -moz-width: calc(100% - 1.86rem);
  -o-width: calc(100% - 1.86rem);
}
.fl_right .contain ul li .right h2 {
  font-size: 0.28rem;
  color: #333;
}
.fl_right .contain ul li .right .gg {
  margin-top: 0.24rem;
}
.fl_right .contain ul li .right .gg span {
  font-size: 0.22rem;
  color: #666 !important;
}
.fl_right .contain ul li .right .gg .right {
  text-align: right;
}
.price {
  margin-top: 0.24rem;
}
.price .left {
  color: #ffa101 !important;
  font-size: 0.36rem;
}
.price .left span {
  font-size: 0.28rem;
  color: #ffa101 !important;
}
.jj_btn {
  text-align: center;
}
.jj_btn span {
  display: block;
  float: left;
  width: 0.5rem;
  border: 1px solid #d8d8d8;
  line-height: 0.5rem;
  font-size: 0.28rem !important;
}
.jj_btn span:active {
  background: #efefef;
}
.jj_btn span:first-child {
  border-radius: 3px 0 0 3px;
}
.jj_btn span:last-child {
  border-radius: 0 3px 3px 0;
}
.jj_btn em {
  display: block;
  float: left;
  width: 0.6rem;
  border-top: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
}
.jj_btn em input {
  display: block;
  width: 100%;
  font-size: 0.28rem;
  line-height: 0.5rem;
  text-align: center;
}

@import "src/style/mixin";
.category_wrapper {
  position: absolute;
  top: 0.9rem;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
.demo {
  @include wh(100%, 2.1rem);
  background: #fff;
  clear: both;
  border-bottom: 0.01rem solid #d6d6d6;
  .demo-left {
    margin: 0.2rem;
    position: relative;
    @include wh(1.5rem, 1.5rem);
    img {
      @include wh(100%, 100%);
    }
    .goods_check {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 0.4rem;
      background: rgba(0, 0, 0, 0.6);
      @include sc(0.24rem, #fff);
      line-height: 0.4rem;
      text-align: center;
    }
  }
  .demo-right {
    padding-top: 0.3rem;
    padding-left: 1.8rem;
    margin-right: 0.2rem;
    .goods_name {
      @include sc(0.3rem, #333);
      line-height: 0.3rem;
      height: 0.3rem;
    }
    .goods_sku_sale {
      margin-top: 0.2rem;
      height: 0.24rem;
      line-height: 0.24rem;
      @include sc(0.24rem, #999);
      .goods_sku {
        margin-right: 0.28rem;
        @include sc(0.24rem, #999);
      }
      .goods_sale {
        @include sc(0.24rem, #999);
      }
    }
    .goods_price_cart {
      height: 0.54rem;
      margin-top: 0.35rem;
      line-height: 0.54rem;
      .goods_price {
        display: inline-block;
        @include sc(0.3rem, #ffa101);
      }
      .goods_cart {
        display: flex;
        img {
          flex: 1;
          @include wh(0.54rem, 0.54rem);
        }
        .cart_num {
          flex: 1;
          line-height: 0.54rem;
          @include wh(0.54rem, 0.54rem);
          text-align: center;
        }
      }
    }
  }
}
.no_data {
  position: absolute;
  top: 0.9rem;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  padding-top: 2.5rem;
  background: #fff;
  z-index: 10;
  img {
    width: 1.5rem;
    height: 2.07rem;
  }
}
</style>
